<template>
  <view class="keyword">
    <!-- 热门搜索 -->
    <view class="hot">
      <!-- 标题 -->
      <view class="space-between title">
        <text>热门搜索</text>
				<text></text>
      </view>
      <!-- 列表 -->
      <view class="list">
        <view @click="search" v-for="item in hotList" :key="item.id">{{item.name}}</view>
      </view>
    </view>
		<!-- 历史搜索 -->
		<view class="hot">
		  <!-- 标题 -->
		  <view class="space-between title">
		    <text>历史搜索</text>
				<text @click="clearHistory">清除</text>
		  </view>
		  <!-- 列表 -->
		  <view class="list">
		    <view @click="search" v-for="(item, index) in historyList" :key="index">{{item}}</view>
		  </view>
		</view>
  </view>
</template>

<script>
  export default {
    props: {
			value: {
				type: Boolean,
				default: false
			},
      hotList: {
				type: Array,
				default: () => [
					{id: 1, name: 'Java'},
					{id: 2, name: 'SpringBoot'},
					{id: 3, name: 'SpringCloud'},
					{id: 4, name: 'Python'},
					{id: 5, name: 'Vue'},
					{id: 6, name: 'React'}
				]
			}
    },
    data() {
      return  {
        historyList: uni.getStorageSync(this.$_global.SEARCH_HISTORY_LIST) || []
      }
    },
		methods: {
			clearHistory() {
				this.historyList = []
				uni.clearStorage(this.$_global.SEARCH_HISTORY_LIST)
			},
			search() {
				this.$emit('input', true)
			}
		},
		mounted() {
			const list = uni.getStorageSync(this.$_global.SEARCH_HISTORY_LIST)
			console.log(list)
		}
  }
</script>

<style lang="scss">
	.keyword {
		padding: 25rpx;
		.title {
			font-size: 30rpx;
			color: #222222;
			text:last-child {
			color: #999;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx 0 60rpx 0;
			view {
				padding: 10rpx 20rpx;
				border: 1rpx solid #999;
				margin: 10rpx;
				border-radius: 8rpx;
				
			}
		}
	}
</style>
